//运动数据
require('../css/sports-data.less')

document.ready(function () {

    window.utils.checkUserLogin();

    const BASE_URL = 'http://139.9.177.51:8099';
    //底部导航
    window.utils.addTab(1);

    // 返回
    backBtn.addEventListener('click', function () {
        history.back();
    })

    let user=JSON.parse(localStorage.getItem('user'))
    // 渲染头像
    let portrait = document.querySelector('#portrait');
    $http.get(`/users/accountinfo?userId=${user.userId}`, function (res) {
        if (res.status === 0) {
            portrait.src = `${res.data.imgurl}`
        }

    })

    
    //渲染运动数据
    $http.get(`/users/mysportsBadge?userId=${user.userId}`, function (res) {
        if (res.status === 0) {
            console.log(res);
            minuteNum.textContent = Math.floor(res.data.sports.times);
            calorienum.textContent = Math.floor(res.data.sports.calorie);
            succession.textContent=res.data.sports.punchin
            addnum.textContent=res.data.sports.punchin
            consumenum.textContent=Math.floor(res.data.sports.calorie)
        }
    })

    // 发请求获取运动数据
    $http.get('/sport/data/4427', function (res) {
        if (res.status === 0) {
            // console.log(res.data.days);
            //获取ECharts柱形图日期需要的格式
            let dateArr = res.data.days.map(function (item) {
                return item.date.substr(5)
            })

            //获取ECharts柱形图时间需要的格式
            let timeArr = res.data.days.map(function (item) {
                return item.dayTimes
            })

            let countsArr = res.data.days.map(function (item) {
                return item.counts
            })
            let obj = {
                '跑步': 0,
                '骑行': 0,
                '训练': 0
            }
            let running = [];
            res.data.days.forEach(function (item) {
                item.exerciseData.forEach(function (v) {
                    // obj[v.type]+=obj[v.time]
                    // console.log(v.type);
                    obj[v.type] = obj[v.type] + Number(v.time)
                    // console.log(obj[v.time]);
                    if (v.type === '跑步') {
                        running.push(v.time);
                    }
                    //如果这一天没有某个训练就添加0
                })
            })
            // console.log("running", running);

            // console.log(obj);
            let seriesPieData = [];
            for (let key in obj) {
                // console.log(obj[key]);
                seriesPieData.push({
                    name: key,
                    value: obj[key]
                })
            }
            // console.log(seriesPieData);

            //获取ECharts圆形图 跑步 骑行 训练 时间需要的格式

            // 柱状图
            function drawBar() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('sportTime'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '近7天运动时长',
                        textStyle: {
                            fontSize: 14
                        },
                        top: 16,
                        left: 16
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '6%',
                        right: '6%',
                        bottom: '6%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: dateArr,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: '直接访问',
                        type: 'bar',
                        // barWidth: '60%',
                        data: timeArr
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
            drawBar()



            // 饼形图
            function pieBar() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('pie'));

                const option = {
                    // 标题
                    title: {
                        text: '运动分类',
                        textStyle: {
                            fontSize: 14
                        },
                        left: 10,
                        top: 10,
                    },
                    // 工具提示    
                    tooltip: {
                        trigger: 'item'
                    },

                    // 图例
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        top: 'middle',
                        itemWidth: 14,
                    },
                    //系列
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '60%',
                        //标签
                        label: {
                            //位置
                            position: 'inside',
                            color: '#fff',
                            formatter: '{d}%',
                        },
                        // 核心数据
                        data: seriesPieData,
                        //强调
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
            pieBar()


            // 折线图
            function line() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('basic'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '近7日训练次数',
                        textStyle: {
                            fontSize: 14
                        },
                        top: 16,
                        left: 16
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '6%',
                        right: '6%',
                        bottom: '6%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: dateArr,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    // 配置项
                    series: [{
                        // name: '直接访问',
                        type: 'line',
                        // barWidth: '60%',
                        data: countsArr
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
            line()

            // 堆叠图
            function bar() {
                var myChart = echarts.init(document.getElementById('pile'));
                var option = {
                    title: {
                        text: '近7日运动分类',
                        textStyle: {
                            fontSize: 14
                        },
                        top: 16,
                        left: 16
                    },
                    // 工具提示
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    // 图例
                    legend: {
                        data: ['跑步', '骑行', '训练'],
                        orient: 'vertical',
                        right: 10,
                        top: 'middle',
                        itemWidth: 14,
                    },
                    // 位置
                    grid: {
                        left: '6%',
                        right: '12%',
                        bottom: '6%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: dateArr
                    },
                    // 核心数据
                    series: [{
                            name: '跑步',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 302, 301, 334, 211, 200, 100]
                        },
                        {
                            name: '骑行',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '训练',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },


                    ]

                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
            bar()
        }
    })




})